import React from 'react';
import { View, Text, StyleSheet, ScrollView, Platform,TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import Form from '../../components/Form';
import { theme } from '../../theme';

export default function HouseCollectScreen() {
  const router = useRouter();

  const fields = [
    {
      name: 'houseNumber',
      label: '房屋编号',
      type: 'text',
      rules: [{ required: true }]
    },
    {
      name: 'buildingName',
      label: '所属楼栋',
      type: 'text',
      rules: [{ required: true }]
    },
    {
      name: 'floor',
      label: '楼层',
      type: 'number',
      width: 'half'
    },
    {
      name: 'area',
      label: '面积(㎡)',
      type: 'number',
      width: 'half'
    },
    {
      name: 'houseType',
      label: '房屋类型',
      type: 'select',
      options: [
        { label: '住宅', value: '住宅' },
        { label: '商铺', value: '商铺' },
        { label: '办公', value: '办公' },
        { label: '其他', value: '其他' }
      ],
      rules: [{ required: true }]
    },
    {
      name: 'ownerName',
      label: '户主姓名',
      type: 'text',
      width: 'half',
      rules: [{ required: true }]
    },
    {
      name: 'ownerPhone',
      label: '联系电话',
      type: 'phone',
      width: 'half',
      rules: [{ required: true }]
    },
    {
      name: 'residentCount',
      label: '常住人口数',
      type: 'number'
    },
    {
      name: 'useStatus',
      label: '使用状态',
      type: 'select',
      options: [
        { label: '自住', value: '自住' },
        { label: '出租', value: '出租' },
        { label: '空置', value: '空置' },
        { label: '其他', value: '其他' }
      ]
    },
    {
      name: 'notes',
      label: '备注信息',
      type: 'textarea'
    }
  ];

  const handleSubmit = (values: Record<string, any>) => {
    console.log('提交数据:', values);
    router.back();
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
          <Ionicons name="arrow-back" size={24} color="#fff" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>房屋信息采集</Text>
        <View style={styles.placeholder} />
      </View>

      <Form
        fields={fields}
        onSubmit={handleSubmit}
        submitText="提交信息"
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  header: {
    backgroundColor: theme.colors.primary,
    paddingTop: Platform.OS === 'ios' ? 50 : 20,
    paddingBottom: 15,
    paddingHorizontal: 15,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  backButton: {
    padding: 5,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: theme.colors.white,
  },
  placeholder: {
    width: 24,
  },
});